<template>
<!-- 用户信息 -->
    <el-row :style="{height:boxHeight}" class="info" id="info">
        <el-col class="info-left">
            <el-card class="info-head">
                <el-row style="margin-bottom: 20px;">
                        <el-tag style="margin-right:40px;" type="success">用户名：<span>{{infoList.username}}</span></el-tag>
                    
                        <el-tag type="success">ip：<span>{{infoList.ip}}</span></el-tag>
                </el-row>
                <el-row>
                        <el-tag style="margin-right:40px;" type="success">邮箱：<span>{{infoList.email}}</span></el-tag>
                    
                        <el-tag type="success">登录时间：<span>{{infoList.logintime}}</span></el-tag>
                </el-row>
            </el-card>
            <el-card>
                <el-tag style="margin-right:40px;" type="warning">文章数量：<span>{{itinfoList.artLength}}</span>篇</el-tag>
                
                <el-tag type="warning">ip数量：<span>{{itinfoList.ipLength}}</span>条</el-tag>
            </el-card>
        </el-col>
        <el-col class="info-right">
            <el-card class="calendar" :style="{height:boxHeight}">
                <el-calendar class="calen" :style="{height:boxHeight}" v-model="calendate"></el-calendar>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'relaedinfo',
    props: ['apprefs'],
    data(){
        return {
            boxHeight: 0,
            clientHeight: '',
            infoList: {
                username: '小和',
                ip: '222.168.0.222',
                email: '1785229693@qq.com',
                logintime: '2020-12-16 15:16:58'
            },
            itinfoList: {
                artLength: '20',
                ipLength: 20,
                ipList: [{
                    ip: '192.168.0.1',
                    username: '李白',
                },{
                    ip: '192.168.0.1',
                    username: '李白',
                },{
                    ip: '192.168.0.1',
                    username: '李白',
                },{
                    ip: '192.168.0.1',
                    username: '李白',
                },{
                    ip: '192.168.0.1',
                    username: '李白',
                },{
                    ip: '192.168.0.1',
                    username: '李白',
                }]
            },
            calendate: new Date()
        }
    },
    created(){  // 操作数据

    },
    methods(){  
    },
    mounted(){// 操作dom
        // let headerHeight = this.apprefs.header.$el.offsetHeight;
        // console.log("头部高度：", headerHeight)
        // this.boxHeight = (document.body.clientHeight - headerHeight) + 'px';
        this.boxHeight = document.documentElement.clientHeight - 120 + 'px'
        console.log("高度", this.boxHeight)
    }

}
</script>

<style scoped>
.info {
    display: flex;
    margin: 0 0 20px 0;
    /* line-height: 60px; */
    /* height: 90%; */
}
.info-left {
    width: 45%;
    margin-right: 5%;
}
.info-head {
    margin-bottom: 30px;
    /* padding: 20px; */
}
.el-row {
    display: flex;
}
.el-row .el-tag {
    width: 45%;
    height:40px;
    line-height: 40px;
}
.el-tag span {
    font-size: 16px;
    font-weight: bolder;
    margin-right: 5px;
}
.info-right {
    width: 45%;
}
.el-calendar {
    padding-bottom: 20px;
}
</style>